<div class="row">
  <div class="col-sm-7">
    <p>The Angular JSON form renderer is a wrapper around the <a href="https://github.com/formio/formio.js">Form.io Core Renderer</a>. This provides the ability to render any Form within the Form.io platform, using the following syntax.</p>
    <div class="card bg-light p-2">
      <pre><code class="language-html">&lt;formio src="https://examples.com/example"&gt;&lt;/formio&gt;</code></pre>
    </div>
    <p>You can also provide a variable as the source as follows.</p>
    <div class="card bg-light p-2">
      <pre><code class="language-html">&lt;formio [src]="formSrc"&gt;&lt;/formio&gt;</code></pre>
    </div>
    <p>And even listen for Change and Submit events as follows.</p>
    <div class="card bg-light p-2">
      <pre><code class="language-html">&lt;formio
  [src]="formSrc"
  (change)="onChange($event)"
  (submit)="onSubmit($event)"
&gt;&lt;/formio&gt;</code></pre>
    </div>
    <p>Or pass JSON directly</p>
    <div class="card bg-light p-2">
      <pre><code class="language-html">&lt;formio [form]="&#123;components: [
  &#123;
    type: 'textfield',
    label: 'FirstName',
    key: 'firstName',
    input: true
  &#125;,
  &#123;
    type: 'textfield',
    label: 'LastName',
    key: 'lastName',
    input: true
  &#125;,
  &#123;
    type: 'email',
    label: 'Email',
    key: 'email',
    input: true
  &#125;,
  &#123;
    type: 'button',
    action: 'Submit',
    label: 'Submit',
    theme: 'primary'
  &#125;
]&#125;"&gt;&lt;/formio&gt;</code></pre>
    </div>
    <p>and populate with data</p>
    <div class="card bg-light p-2">
      <pre><code class="language-html">&lt;formio [form]="&#123;components: [
  &#123;
    type: 'textfield',
    label: 'FirstName',
    key: 'firstName',
    input: true
  &#125;,
  &#123;
    type: 'textfield',
    label: 'LastName',
    key: 'lastName',
    input: true
  &#125;,
  &#123;
    type: 'email',
    label: 'Email',
    key: 'email',
    input: true
  &#125;,
  &#123;
    type: 'button',
    action: 'Submit',
    label: 'Submit',
    theme: 'primary'
  &#125;
]&#125;" [submission]="&#123;
  data: &#123;
    firstName: 'Joe',
    lastName: 'Smith',
    email: 'joe@example.com'
  &#125;
&#125;"&gt;&lt;/formio&gt;</code></pre>
    </div>
  </div>
  <div class="col-sm-5">
    <p><a href="https://github.com/formio/angular-formio/wiki/Form-Renderer" class="btn btn-primary btn-block" target="_blank"><span class="fa fa-book"></span> Renderer Documentation</a></p>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Result</h5>
        <div class="card bg-light p-3">
          <formio [form]="{components: [
            {
              type: 'textfield',
              label: 'FirstName',
              key: 'firstName',
              input: true
            },
            {
              type: 'textfield',
              label: 'LastName',
              key: 'lastName',
              input: true
            },
            {
              type: 'email',
              label: 'Email',
              key: 'email',
              input: true
            },
            {
              type: 'button',
              action: 'Submit',
              label: 'Submit',
              theme: 'primary'
            }
          ]}" [submission]="{
            data: {
              firstName: 'Joe',
              lastName: 'Smith',
              email: 'joe@example.com'
            }
          }"></formio>
        </div>
      </div>
    </div>
  </div>
</div>
